<template>
  <div class="page">
    <m-header :title="langText&&langText.cpd"  :canback="Boolean(1)" ></m-header>
    <section class="body">
        
        <div class="banner_box">
            <img class="banner" :src="imgurl?api+imgurl:''" alt>
        </div>

        <div class="top_box">
          <div class="left">
            <div class="title">{{data.name_cn}}</div>
            <div class="top_bgc"></div>
          </div>
          <div class="right">
              <div>
                  
              <p>{{langText&&langText.price}}: {{data.price}}</p>
              <p>{{langText&&langText.dailyincome}}: {{data.per2}}%~{{data.per3}}%</p>
              <p>{{langText&&langText.packagecycle}}：{{data.days}}{{langText&&langText.day}}</p>
              </div>
          </div>
        </div>

        <div class="bot_box">
            <div class="content">
                <span class="title">{{langText&&langText.contractdescription}}</span>
                <div class="bgc"></div>
                <!-- <p class="text">{{data.explain}}</p> -->
                <div class="text" v-html="data.explain"></div>
            </div>
            <div class="content">
                <span class="title">{{langText&&langText.riskintroduction}}</span>
                <div class="bgc"></div>
                <!-- <p class="text">{{data.risk}}</p> -->
                <div class="text" v-html="data.risk"></div>
            </div>
            <div class="content">
                <span class="title">{{langText&&langText.disclaimer}}</span>
                <div class="bgc"></div>
                <!-- <p class="text">{{data.affirming}}</p> -->
                <div class="text" v-html="data.affirming"></div>
            </div>
        </div>
    
        <div class="deal">
            <input type="checkbox" @click="che = !che;agreement=agreement==0?'1':'0'" class="radio" :checked='che'>
            <p>{{langText&&langText.ihaveread}} <span @click="textAlert">《{{langText&&langText.purchaseagreement}}》</span> </p>
        </div>

        <button class="sm-btn" @click="btn">{{langText&&langText.rentnow}}</button>
    </section>
    <m-Footer></m-Footer>
    <m-load ref="load"></m-load>
    <m-pwd ref="pwd" @pay="pay"></m-pwd>

  </div>
</template>
<script>
import { Init, Index, Owner,Trade  } from '@/server/server.js';
import {Util,Load} from '@/assets/commonjs/utils.js';
import {mapGetters} from 'vuex';
import mPwd from '@/components/pwd-alert.vue';
import { Hashrate } from "@/assets/commonjs/lan.js";
export default {
  components:{
      mPwd
  },
  data(){
      return {
        defaultBanner:require('@/assets/images/gzlz/banner.png'),
        data:{
            name_cn:null,
            price:null,
            per:null,
            days:null,
            explain:null,
            risk:null,
            affirming:null,


        },
        c:null,
        che:false,
        content:null,
        id:null,
        allTxt:null,
        agreement:'0',
        langText:null,
        imgurl:null,
      }
  },
  mounted() {
      this.initData();
      this.detail();
      this.getAgreement();
  },
  computed: {
    ...mapGetters(['uid','api','getLangId'])
  },
  methods: {
        initData(){
            this.id = this.$route.query.id;
            this.allTxt = Object.assign({},Hashrate)
            this.langText = Object.assign({},JSON.parse(localStorage.getItem('hashrate')),JSON.parse(localStorage.getItem('homeText')))
        },
        btn(){
            // if(!this.che) {
            //     mui.toast('请勾选同意协议');
            //     return;
            // }
            
            this.$refs['pwd'].open();
        },
        textAlert(){
            mui.alert(this.content,`《${this.langText&&this.langText.purchaseagreement}》`)
        },
        pay(paypwd){
            
                // mui.toast(this.che)
            Trade.buytc({id:this.id,paypwd,agreement:this.agreement}).then(res=>{
                mui.toast(res.msg)
                if(res.code==1){
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 500);
                }
            })
        },
        detail(){
            Trade.detail({id:this.id}).then(res=>{
                if(res.code==1){
                    this.data = res.data;
                    this.imgurl = res.data.image;
                }else{
                    mui.toast(res.msg)
                }
            })
        },
        getAgreement(){
            Trade.getAgreement().then(res=>{
                if(res.code==1){
                    this.content = res.data.agreement;
                }else{
                mui.toast(res.msg)
                }
            })
        },
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
    line-height: 36px;
    background-color: @bg-color;
    p{
        color: #000;
    }
    .banner_box{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 300px;
        .banner {
            width: 100%;
            height: 300px;
        }
    }
    .top_box{
        display: flex;
        justify-content: space-between;
        margin: 30px 20px;
        // width:710px;
        height:170px;
        background:rgba(255,255,255,1);
        border-radius:10px;
        .left{
            width: 300px;
            text-align: center;
            margin: 60px 40px; 
            // display: inline-block;
            .title{
                width: auto;
                font-size:34px;
                font-weight:550;
                color:rgba(78,182,173,1);;
            }
            .top_bgc{
                background:rgba(78,182,173,0.2);
                height: 20px;
                // width: 177px;
                margin: -20px auto;
                z-index: -99;
            }
        }
        .right{
            display: inline-block;
            width: 390px;
            margin-top: 10px;
            >div{
                p{
                    color: #000;
                    margin-top: 10px;
                }
            }
        }
    }
    .bot_box{
        
        margin: 30px 20px;
        background:rgba(255,255,255,1);
        border-radius:10px;
        padding: 20px 0 50px;
        .content{
            text-align: center;
            margin-top: 30px;
            .title{
                font-size:40px;
                font-weight:550;
                color:rgba(78,182,173,1);
                position: relative;
                &::after{
                    content: '';
                    background:rgba(78,182,173,0.2);
                    height: 20px;
                    position: absolute;
                    bottom: 0;
                    width: 120%;
                    left: -10%;
                }
            }
            // .bgc{

            //     background:rgba(78,182,173,0.2);
            //     height: 20px;
            //     width: 177px;
            //     margin: -10px auto;
            //     z-index: -99;
            // }
            .text{
                /deep/ p{
                    color: #000;
                    margin-top: 30px;
                    font-weight: 550;
                    font-size:28px;
                }
            }
        }
    }
    .deal{
        padding: 10px 40px;
        .radio{
            display: inline-block;
            -webkit-appearance:radio;
            background-color: #fff;
        }
        >p{
            display: inline-block;
            span{
                color: #8498E3;
            }
        }
    }
    .sm-btn{
        width:710px;
        height:88px;
        background:rgba(78,182,173,1);
        border-radius:10px;
        margin: 20px;
    }
    
 
}
/deep/.mui-popup-text{
        color: #000;
    /deep/p{
        color: #000;
    }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
p {
    color: #000;
}
</style>
<style lang="less">
._v-container {
  height: 300px!important;
}
._v-container>._v-content>.loading-layer .spinner-holder .spinner, ._v-container>._v-content>.pull-to-refresh-layer .spinner-holder .spinner{
    margin-top: 0!important;
    fill: white!important;
    stroke: white!important;
    z-index: 1;
}
.mui-popup{
        color: #000;
    p{
        color: #000;
    }
}
</style>
